<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :pagination="true"
        :searchFunc="getProductCategory"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
import { getProductCategory } from '@/api/product';
import TableList from '@/components/TableList/index';
import { getList as getProductList } from '@/api/product';
import CryptoJS from 'crypto-js';
export default {
  name: 'category',
  components: {
    TableList,
  },
  data() {
    return {
      getProductCategory,
      tableDataColumn: [
        {
          prop: 'id',
          searchName: 'id',
          label: 'ID',
          minWidth: '60',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'category_name',
          searchName: 'category_name',
          label: '分类名称',
          minWidth: '180',
          searchType: 'input',
          baseSeachColumn: true,
        },
        {
          prop: 'category_no',
          searchName: 'category_no',
          label: '编号',
          minWidth: '180',
          searchType: 'input',
          baseSeachColumn: true,
        },
        {
          prop: 'is_leaf',
          searchName: 'is_leaf',
          label: '是否叶子节点',
          options: [
            {
              value: 1,
              label: '是',
              color: '#67C23A',
            },
            {
              value: 0,
              label: '否',
              color: '#F56C6C',
            },
          ],
          minWidth: '120',
          searchType: 'select',
        },
        {
          label: '操作',
          searchField: false,
          render: (h, scope) => {
            if (scope.row.is_leaf == 1) {
              return (
                <div>
                  <el-button
                    size='mini'
                    type='text'
                    onClick={() => {
                      this.showCustomerStatisticsAction(scope.row);
                    }}>
                    用户使用统计
                  </el-button>
                  <el-button
                    size='mini'
                    type='text'
                    onClick={() => {
                      this.showSupplierStatisticsAction(scope.row);
                    }}>
                    供应商统计
                  </el-button>
                </div>
              );
            } else {
              return {};
            }
          },
          fixed: 'right',
          minWidth: '160',
        },
      ],
    };
  },
  methods: {
    showCustomerStatisticsAction(row) {
      this.toStatisticsAction(row, 'customer')
    },
    showSupplierStatisticsAction(row) {
      this.toStatisticsAction(row, 'supplier')
    },
    async toStatisticsAction(row, type){
      let productListData = await getProductList({ where: { category_id:row.id } })
      if( productListData.data && productListData.data.total && productListData.data.total > 0 ){
        let produtIds = JSON.stringify(productListData.data.data.map(el=>el.id))
        var str = CryptoJS.enc.Utf8.parse(produtIds);
        var res = CryptoJS.enc.Base64.stringify(str);
        let routeUrl = this.$router.resolve({
          path: '/statistics/record',
          query: { key: res, type: CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(type)), categoryName:row.category_name },
        });
        window.open(routeUrl.href, '_blank');
      } else {
        this.$message({
          message: '当前分类无产品',
          type: 'warning'
        });
      }
    }
  },
};
</script>
